import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/pages/site/site_observer_list/site_observer_list_controller.dart';
import 'package:yt_devops/pages/site/site_observer_list/views/scrollT_tabbar.dart';
import 'package:yt_devops/styles/styles.dart';

class SiteObserverTabView extends StatelessWidget {
  final List<String> tabs;
  final  int selectedIndex;
  final Function(int) onTabSelected;

  SiteObserverTabView(
      {super.key, required this.tabs,required this.selectedIndex,required this.onTabSelected});

  final controller = Get.put(SiteObserverListController());

  @override
  Widget build(BuildContext context) {

    return SizedBox(
      height: 48.h, // 设置选项卡高度
      child: GetBuilder<SiteObserverListController>(
        builder: (controller) {
          return      ScrollTabBar(
            tabCount: tabs.length,
            visibleCount:4,
            currentIndex: 1,
            width: MediaQuery.of(context).size.width,
            height: 50,
            backgroundColor: Colors.white,
            animMode: TabAnimMode.middle,
            tabBuilder: (context, index, select) {
              String name = tabs[index];
              return
                Center(
                child:
                GestureDetector(
                        onTap: () {
                          onTabSelected(index); // 回调给父组件处理
                        },
                        child: Container(
                          height: 48.h,
                          color: Colors.white,
                          padding: EdgeInsets.symmetric(horizontal: 12.w),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(
                                height: 10.h,
                              ),
                              SizedBox(
                                height: 22.h,
                                child: Text(
                                  tabs[index],
                                  style: TextStyles.styleWith(
                                    16.sp,
                                    color: controller.selectedTitleIndex == index
                                        ? const Color(0xFF0F6EFF)
                                        : Colour.mainTextColor,
                                  ).mediumStyle,
                                ),
                              ),
                              SizedBox(
                                height: 12.h,
                              ),
                              Container(
                                height: 3.h,
                                width: 24.w, // 设置下划线宽度
                                color: controller.selectedTitleIndex == index
                                    ? Colors.blue
                                    : Colors.transparent,
                              ),
                            ],
                          ),
                        ),
                      ),

              );
            },
            // dividerBuilder: (context) {
            //   return const Divider(height: 1, color: Colors.red);
            // },
          );

        },
      ),
    );
  }
}
